<template>
  <el-tabs v-model="activeName" type="card" class="search_wrapper" @tab-change="focus">
    <el-tab-pane :label="nav.name" :name="nav.name" v-for="nav in navList" :key='nav.name'>
      <template #label v-if="['Google','搜狗','360','Bing','百度'].includes(nav.name)">
        <span v-if="nav.name === 'Google'" style="font-weight: 600;">
            <span style="color: #3B83FA">G</span>
            <span style="color: #F3442C">o</span>
            <span style="color: #FFC300">o</span>
            <span style="color: #4696F8">g</span>
            <span style="color: #2CAB4E">l</span>
            <span style="color: #F54231">e</span>
        </span>
        <span v-if="nav.name === '百度'">
          <span style="color: #00c;font-weight: 600;">百度</span>
        </span>
        <span v-if="nav.name === '搜狗'">
          <span style="color: #FE6811;">搜狗</span>
        </span>
        <span v-if="nav.name === '360'">
          <span style="color: #19B955;font-weight: 600;">360</span>
        </span>
        <span v-if="nav.name === 'Bing'">
          <span style="color: #007DAA;font-weight: 600;">Bing</span>
        </span>
      </template>
      <el-autocomplete
          v-model="text"
          autofocus
          ref="autocomplete"
          :fetch-suggestions="querySearchAsync"
          :placeholder="nav.placeholder"
          @select="handleSelect"
          @keyup.enter="handleSelect"
          :prefix-icon="Search"
          style=" width: 100%;"
          :popper-class="state.setting.showSearchSuggest ? '' : 'hidden'"
          clearable
      />
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ElMessage } from 'element-plus';
import { jsonpRequest } from '@/assets/js/util';
import { useStore } from "vuex";

let store = useStore();
let state = store.state;

const navList = ref([
  { name: '百度',placeholder: '百度一下', url: 'https://www.baidu.com/s?wd=', getScriptSrc: (queryString: string) => `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${queryString}&cb=dosomething` },
  { name: 'Bing',placeholder: '微软Bing搜索', url: 'https://cn.bing.com/search?q=', getScriptSrc: (queryString: string) => `https://api.bing.com/qsonhs.aspx?type=cb&q=${queryString}&cb=dosomething&callback=dosomething` },
  { name: 'Google',placeholder: 'Google搜索', url: 'https://www.google.com/search?q=' },
  { name: '360',placeholder: '360搜索', url: 'https://www.so.com/s?q=',getScriptSrc: (queryString: string) => `https://sug.so.360.cn/suggest?word=${queryString}&cb=dosomething&callback=dosomething` },
  { name: '搜狗',placeholder: '搜狗搜索', url: 'https://www.so.com/s?q=',getScriptSrc: (queryString: string) => `https://www.sogou.com/suggnew/ajajjson?type=web&key=${queryString}&cb=dosomething&callback=dosomething` },
  // { name: 'Magi',placeholder: 'Magi搜索', url: 'https://www.google.com/search?q=' },
  { name: '神马',placeholder: 'UC移动端搜索', url: 'https://yz.m.sm.cn/s?q=' },
  { name: '站内',placeholder: '站内搜索' }
]);
const text = ref('');
const autocomplete = ref(null);
const activeName = ref(navList.value[0].name);
const handleSearch = (item) => {
  // console.log(item)
  if (!text.value) return ElMessage("请输入需要搜索的内容！");

  window.open(item.url + text.value,state.setting.newTabOpenSearchResult ? '_blank' : '_self');
};
// eslint-disable-next-line no-undef
let timeout: NodeJS.Timeout;

const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
  if(!queryString || !state.setting.showSearchSuggest) return cb([]);

  clearTimeout(timeout);
  timeout = setTimeout(() => {
    let find: any = navList.value.find(f => f.name === activeName.value);
    find.getScriptSrc && jsonpRequest(find.getScriptSrc(text.value));
    window.dosomething = (data: any) => {
      cb(dataControl(data));
    };
    if(activeName.value === '搜狗') {
      window.sogou = {
        sug: (data: any) => {
          cb(dataControl(data[1]));
        }
      };
    }
  }, 300);
};
const handleSelect = () => {
  let find: any = navList.value.find(f => f.name === activeName.value);
  handleSearch(find);
};
const dataControl = (data: any) => {
  if(activeName.value === '百度') {
    return data.s.map((m: any) => {
      return { label: m, value: m };
    });
  }
  if(activeName.value === 'Bing') {
    return data.AS.Results.map((m: any) => m.Suggests).flat(2).map((m: any) => {
      return { label: m.Txt, value: m.Txt };
    });
  }
  if(activeName.value === '360') {
    return data.result.map((m: any) => {
      return { label: m.word, value: m.word };
    });
  }
  if(activeName.value === '搜狗') {
    return data.map((m: any) => {
      return { label: m, value: m };
    });
  }

};
const focus = (tab = navList.value[0].name) => {
  let findIndex = navList.value.findIndex(f => f.name === tab);
    autocomplete.value && autocomplete.value[findIndex] && autocomplete.value[findIndex].focus();
};
onMounted(() => {
  focus();
});
</script>

<style scoped lang="scss">
.search_wrapper{
  //height: 50px;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
  border: 1px solid #dcdfe6;
  margin: 20px auto 0;
  :deep(.el-tabs__content){
    padding: 0 20px 20px;
  }
  :deep(.el-tabs--card>.el-tabs__header .el-tabs__nav){
    border-top: 0;
  }
  :deep(.el-tabs__header){
    background-color: #f5f7fa;
    .el-tabs__item.is-top.is-active{
      background-color: #fff;
    }
  }
}
</style>